

//数据渲染
$(function(){
    let uid = localStorage.getItem("uid")
    console.log(uid);
    $.ajax({
        type:"get",
        url:"http://jx.xuzhixiang.top/ap/api/cart-list.php",
        data:{
            id:uid,
        },
        success:function(res){
            console.log(res.data);

            // 用户id渲染
            let userID = document.querySelector(".car-header-right-user");
            let userStr ="";
            userStr+=`
                <a href="#">${uid}</a><i>lo</i>
                <div class="car-header-right-hidden">
                    <ul>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">评价晒单</a></li>
                        <li><a href="#">我的喜欢</a></li>
                        <li><a href="#">小米账户</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </div>
            `;
            userID.innerHTML = userStr;

            // 鼠标移入事件
            $(".car-header-right-user").mouseover(function(){
                $(".car-header-right-hidden").css({"display":"block"})
            })
             .mouseout(function(){
                 $(".car-header-right-hidden").css({"display":"none"})
            })

            // 购物车列表数据渲染
            let shoplistData = document.querySelector(".car-main-shoplist");
            // console.log(shoplistData);
            let listStr = "";
            let shopArr = res.data;
            // console.log(shopArr);
            shopArr.forEach((item)=>{
                listStr+=`
                    <div class="car-main-shoplist-data">
                        <div class="shoplist-data-check">
                            <input type="checkbox" class="checkbox">
                        </div>
                        <a href="#" class="shoplist-data-img"><img src="${item.pimg}" alt=""></a>
                        <a href="#" class="shoplist-data-desc">${item.pdesc}</a>
                        <span class="shoplist-data-price"><i>${parseInt(item.pprice)}</i>元</span>
                        <div class="shoplist-data-num">
                            <button class="car-reduce" data-id="${item.pid}"><i>-</i> </button>
                            <input type="text" class="car-num" value="${item.pnum}">
                            <button class="car-add" data-id="${item.pid}"><i>+</i> </button>
                        </div>
                        <span class="shoplist-data-amount"><i>${item.pprice*item.pnum}</i>元</span>
                        <button class="shoplist-data-do" data-id="${item.pid}">X</button>
                
                    </div>
                `;
                shoplistData.innerHTML=listStr;
            })
           

            // 加减数据渲染
            
           //减
            $(".car-reduce").click(function(){
                let pnum = $(this).siblings("input").val()
                let pid =$(this).attr("data-id");
                let amount =$(this).parent().next().children().text();
                let price = $(this).parent().prev().children().text();
                // console.log($(this).parent().next().children().text());
                if(pnum==1){
                    alert("修改数量不能小于1")
                }
                else{
                    pnum--;
                    amount = price*pnum;
                }
                $(this).siblings("input").val(pnum);
                $(this).parent().next().children().text(amount);
                 $.ajax({
                     type:"get",
                     url:"http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                     data:{
                         uid:uid,
                         pid:pid,
                         pnum:pnum,
                     },
                     success:function(res){
                        // console.log(res);
                        
                        
                     }

                 })
                 amoutPrice();
                 amountNum();
            })

            //加
            $(".car-add").click(function(){
                let pnum = $(this).siblings("input").val()
                let pid =$(this).attr("data-id");
                let amount =$(this).parent().next().children().text();
                let price = $(this).parent().prev().children().text();
                pnum++;
                amount = price*pnum;
                $(this).siblings("input").val(pnum);
                $(this).parent().next().children().text(amount);
                 $.ajax({
                     type:"get",
                     url:"http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                     data:{
                         uid:uid,
                         pid:pid,
                         pnum:pnum,
                     },
                     success:function(res){
                        // console.log(res);
                     }

                 })
                 amoutPrice();
                 amountNum();
            })
            //删除
           
            $(".shoplist-data-do").click(function(){
                let pid =$(this).attr("data-id");
                let reload= $(this).parents(".car-main-shoplist-data")
                $.ajax({
                    type:"get",
                    url:"http://jx.xuzhixiang.top/ap/api/cart-delete.php",
                    data:{
                        uid:uid,
                        pid:pid,
                    },
                    success:function(){
                        reload.remove();
                        if($(".checkbox").length == $(".checkbox:checked").length){
                            $("#checkall").prop("checked",true);
                        }
                        else{
                         $("#checkall").prop("checked",false);
                        
                        }
                        amoutPrice();
                        amountNum();
                    },
                    
                });
              
                
            })
             // 单选
            $(".checkbox").click(function(){
               
                if($(".checkbox").length == $(".checkbox:checked").length){
                    $("#checkall").prop("checked",true);
                }
                else{
                 $("#checkall").prop("checked",false);
                
                }
                // 调用计算总价函数
                amoutPrice();
                amountNum();
            })
           // 全选

           $("#checkall").prop("checked",false);
           $("#checkall").click(function(){
                $(".checkbox").prop("checked",$(this).prop("checked"));
                // 调用计算总价函数
                amoutPrice();
                amountNum();
            })
        
            // 总价函数
            
            function amoutPrice(){
                let priceall = 0;
                $(".checkbox:checked").each(function(){
                    priceall +=Number($(this).parent().siblings(".shoplist-data-amount").children().text());
                    })
                $(".amount-price").children().text(priceall);
            }

            // 数量函数
            amountNum();
            function amountNum(){
                let allnum = 0;
                let checknum = 0;
                $(".checkbox").each(function(){
                    allnum += Number($(this).parent().siblings(".shoplist-data-num").children(".car-num").val());
                })
                $(".checkbox:checked").each(function(){
                    checknum+=Number($(this).parent().siblings(".shoplist-data-num").children(".car-num").val())
                })
                $(".checked-allnum").text(allnum);
                $(".checked-num").text(checknum);
            }
            console.log($(".checkbox").parent().siblings(".shoplist-data-num").children(".car-num").val());
            console.log($(".checked-allnum"));
        }
    })
})

